<script setup lang="ts">
import { ref, toRefs } from 'vue';

import {
  ElButton,
  ElDialog,
  ElDivider,
  ElTable,
  ElTableColumn,
} from 'element-plus';

import MvtPreviewDialog from '../preview/mvt-preview.vue';
import RasterPreviewDialog from '../preview/raster-preview.vue';

const props = defineProps({
  isThisDialogShow: {
    type: Boolean,
    default: false,
  },
  fileId: {
    type: String,
    default: '',
  },
  alreadyPublishServiceList: {
    type: Array<any>,
    default: [],
  },
  serviceType: {
    type: String,
    default: '',
  },
  useType: {
    type: String,
    default: 'import',
  },
});

const emits = defineEmits([
  'closeAlreadyPublishServiceDialog',
  'selectAlreadyPublishService',
]);

const { isThisDialogShow, alreadyPublishServiceList, useType } = toRefs(props);

// const alreadyPublishServiceList = ref([] as any)
const isMvtPreviewDialogShow = ref(false);
const isRasterPreviewDialogShow = ref(false);
const selectedTableRow = ref({} as any);

const handleCloseThisDialog = () => {
  emits('closeAlreadyPublishServiceDialog');
};
// 预览判断矢栅
const handlePreview = (data: any) => {
  // console.log(data);
  selectedTableRow.value = data;
  if (data.geoType) isMvtPreviewDialogShow.value = true;
  else {
    isRasterPreviewDialogShow.value = true;
  }
  // console.log(isRasterPreviewDialogShow.value);
};
const handleAddService2Layer = (data: any) => {
  // console.log(data);
  emits('selectAlreadyPublishService', data);
  emits('closeAlreadyPublishServiceDialog');
};
</script>

<template>
  <div>
    <ElDialog
      class="dialog-title"
      v-model="isThisDialogShow"
      width="auto"
      align-center
      destroy-on-close
      @close="handleCloseThisDialog"
    >
      <template #header>
        <div class="my-header">
          <h4 style="font-size: 18px; color: rgb(48 45 45)">
            已发布的服务列表
          </h4>
        </div>
        <ElDivider style="padding: 0; margin: 0" />
      </template>
      <!-- <el-table
        :data="alreadyPublishServiceList"
        highlight-current-row
      >
        <el-table-column prop="name" label="服务名称" width="150"></el-table-column>
        <el-table-column prop="publishTime" fixed="right" label="发布时间" width="150">
        </el-table-column>
      </el-table> -->
      <ElDivider
        border-style="hidden"
        style="margin-top: 5px; margin-bottom: 5px"
      />
      <ElTable
        :data="alreadyPublishServiceList"
        style="width: 100%; padding-left: 15px"
        :header-cell-style="{ 'font-size': '14px', color: '#666' }"
      >
        <ElTableColumn
          prop="name"
          label="服务名称"
          width="140"
          show-overflow-tooltip
        />
        <ElTableColumn prop="publishTime" label="发布时间" width="180" />
        <ElTableColumn fixed="right" label="操作" width="105">
          <template #default="scope">
            <ElButton
              link
              type="primary"
              size="small"
              @click="handlePreview(scope.row)"
            >
              预览
            </ElButton>
            <ElButton
              link
              type="primary"
              size="small"
              @click="handleAddService2Layer(scope.row)"
              :disabled="useType === 'view'"
            >
              导入
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <ElDivider
        border-style="hidden"
        style="margin-top: 5px; margin-bottom: 5px"
      />
      <template #footer>
        <span class="dialog-footer">
          <ElButton class="mybtn" @click="handleCloseThisDialog">取消</ElButton>
        </span>
      </template>
    </ElDialog>
  </div>
  <MvtPreviewDialog
    v-if="isMvtPreviewDialogShow"
    :is-dialog-show="isMvtPreviewDialogShow"
    :current-mvt-data="selectedTableRow"
    @close-preview-dialog="isMvtPreviewDialogShow = false"
  />
  <RasterPreviewDialog
    v-if="isRasterPreviewDialogShow"
    :is-dialog-show="isRasterPreviewDialogShow"
    :current-mvt-data="selectedTableRow"
    @close-preview-dialog="isRasterPreviewDialogShow = false"
  />
</template>

<style scoped>
.icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.15em;
  fill: currentcolor;
}

:deep(.el-dialog) {
  height: auto;
  border-radius: 20px;
  box-shadow: 0 0 50px rgb(0 0 0 / 50%);
}

.my-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding-top: 10px;
  padding-bottom: 5px;
  padding-left: 20px;
  font-size: 18px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.mybtn {
  width: 80px;
  height: 30px;
  font-weight: bolder;
  letter-spacing: 1px;
  border-radius: 3px;
}
</style>
